﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dbPoll_Application.ViewModels.ReportViewModel>" %>

<asp:Content ID="Content2" ContentPlaceHolderID="TitleContent" runat="server">
	dbPoll - Responding
</asp:Content>

<asp:Content ID="Content4" ContentPlaceHolderID="MainContent" runat="server">
<script type="text/javascript">    var webURL = true;</script>
<script type="text/javascript" src="../../Scripts/PageControl.js"></script>
<script type="text/javascript" src="../../Scripts/MessageListener.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

    // Load the Visualization API and the piechart package.
    google.load('visualization', '1', { 'packages': ['corechart'] });
    google.setOnLoadCallback(drawChart);

    // Build the array of data
    var dataArray = [];
    dataArray[0] = ['Answer', 'Previous Poll', 'Current Poll'];

    <% 
        int demoResponseCount = 0;
        int compareResponseCount = 0;
        
        // Get the total count of responses
        foreach (var response in Model.demoResponses) 
        { 
            demoResponseCount += response.Value;
        }
        
        // Get the total count of responses for the other question
        foreach (var response in Model.compareResponses) 
        { 
            compareResponseCount += response.Value;  
        }
        
        int i = 1;
        
        // Populate the array with the data
        foreach (var response in Model.demoResponses) 
        {
            
            %>
                
            dataArray[<%=i%>] = ["<%=response.Key%>", <%=response.Value%>/<%=demoResponseCount%>, <%=Model.compareResponses[response.Key]%>/<%=compareResponseCount%>];
                
            <%
            
        i++;
        
        }    
        
    %>

    function drawChart() {
        var data = google.visualization.arrayToDataTable(dataArray);
        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));

        <% 
            int j = 0;

            // Set formatted value for each of the rows
            foreach (var response in Model.demoResponses)
            {
                %>
                data.setFormattedValue(<%=j%>, 1, "<%=response.Value%>"); 
                data.setFormattedValue(<%=j%>, 2, "<%=Model.compareResponses[response.Key]%>");
                <%
            j++;
            }    
        %> 

        chart.draw(data, { backgroundColor: '#EAF0F4', width: 650, height: 400, colors: [<%=Model.chartColours%>], vAxis: { format:'#%', minValue:0 } });     
    }

    </script>

    <div class="pageHeadingContainer"><h2 class="pageHeading">Responding</h2></div>
    <div id="contentContainer">
        <p>Respond > <%= ViewData["pollName"] %> > Question <%= ViewData["questionNumber"] %> of <%= ViewData["questionCount"] %></p>
        <div class="respondTitle"><div class="respondTitlePadding">Results</div></div>
        <div id="respondQuestionContainer">
            <div id="respondQuestionContainerPadding">
            <div id="respondQuestionText"><%= Model.text %></div>
            <div id="respondOptionsContainer">
                <div id="chart_div" align="center"></div>
                <input type="hidden" name="pollID" id="pollID" value="<%= ViewData["pollID"] %>" />
            </div>
        </div>
        </div>
        <div class="respondTitle"><div class="respondTitlePadding">Messages</div></div>
        <div id="respondMessageContainer">
        </div>
    </div>

</asp:Content>
